import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import { AppOutline, AppstoreOutline, TruckOutline, UserOutline, } from 'antd-mobile-icons'
import { store } from '../store/index'
import './MyTabbar.css'


class MyTabbar extends Component {
  render() {
    const tabs = [
      {
        key: '/home',
        title: '首页',
        icon: <AppOutline />
      },
      {
        key: '/cates',
        title: '分类',
        icon: <AppstoreOutline/>,
      },
      {
        key: '/cart',
        title: '购物车',
        icon: <TruckOutline />,
        badge: store.getState()['preState']? store.getState()['preState'] : '',
      },
      {
        key: '/user',
        title: '个人中心',
        icon: <UserOutline />
      },
    ]
    return (
      <div className='tab_bar'>
        <TabBar activeKey={this.props.pathname} onChange={(value) => this.goTabbarPage(value)}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} badge={item.badge}  />
          ))}
        </TabBar>
      </div>
    )
  }
  goTabbarPage = (value) => {
    this.props.history.push(value)
  }
}

export default withRouter(MyTabbar)